<template>
    <div class="chart-box">
        <div class="progress" v-for="(item, i) in list" :key="i">
            <div class="line">
                <div class="track" :style="{
                    width: item.value  + '%'
                }"></div>
                <div class="thume" :style="{
                    left: item.value  + '%'
                }"></div>
            </div>
            <div class="title">
                <div>{{ item.name }}</div>
                <div>{{ item.value }}</div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name: "CaseExample",
    data() {
        return {
            list: [
                {
                    name: '最高院发布典型案例',
                    value: 2
                }, {
                    name: '案例库案例',
                    value: 5
                }, {
                    name: '获奖案例分析',
                    value: 2
                }, {
                    name: '中国法院年度案例',
                    value: 13
                }, {
                    name: '重庆高院参考性案例',
                    value: 1
                }, {
                    name: '重庆高院典型案案例',
                    value: 73
                }, {
                    name: '五中院典型案例',
                    value: 10
                }
            ]
        }
    },
    mounted() {
    }
}
</script>

<style lang="less" scoped>
.chart-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 50px 40px;

    .progress {
        .line {
            display: flex;
            background: rgb(48, 67, 85);
            height: 13px;
            width: 96%;
            position: relative;
            align-items: center;
            .track {
                height: 100%;
                background: linear-gradient(to right,rgb(18 197 223),rgb(72 230 183));
            }
            .thume{
                width: 5px;
                height: 140%;
                background: #fff;
            }
        }

        .title {
            display: flex;
            color: #fff;
            font-size: 16px;
            justify-content: space-between;
            margin: 2px 0 0;
        }
    }
}
</style>